<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="导入商品"
    width="700px"
    @close="close"
  >
    <!--  html  -->
    <div v-loading="loading" class="dialog-upload-excel" element-loading-text="上传中">
      <!-- 批量导入说明 -->
      <div class="app-main-tips-box">
        <div class="title">
          <i class="el-icon-warning" /> 导入说明
        </div>
        <ul>
          <li>
            1.先下载EXCEL模板，按照要求填写后上传文档进行导入，
            <a class="btn" @click.prevent="downTemplate">
              <u>点击下载模板</u>
            </a> 。
          </li>
          <li>2.每次导入文件大小不能超过5M。</li>
          <li>3.不导入模板提供字段之外的数据。</li>
          <!--          <li>4.学校、年级、班别必填。一个年级有多个班别则填写多行。</li>-->
          <!--          <li>5.导入完成后，如果有错误行，请在任务列表下载错误数据，修改后再次导入。</li>-->
        </ul>
      </div>
      <div>
        <el-upload
          ref="upload"
          :action="uploadUrl"
          :multiple="false"
          :limit="1"
          :headers="uploadHeaders"
          :on-success="handleExcelSuccess"
          :before-upload="beforeExcelUpload"
          class="upload-container"
          drag
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            将excel文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </div>
    </div>

    <!--    <div slot="footer" class="dialog-footer">-->
    <!--      <el-button size="small" round @click="hide">取 消</el-button>-->
    <!--      <el-button size="small" round type="primary" @click="submit">确 定</el-button>-->
    <!--    </div>-->
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { marketingGoodsUploadUrl } from '@/api/upload'
export default {
  data() {
    return {
      // 配置
      title: null,
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      loading: false,
      // 数据
      uploadHeaders: {},
      uploadUrl: marketingGoodsUploadUrl
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {

  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    // 弹框相关
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.uploadHeaders = { 'X-BUSINESS-TOKEN': this.$store.state.user.token }
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.loading = false
    },

    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    downTemplate() {
      const alink = document.createElement('a')
      alink.href = this.fileBaseUrl + '/business/template/marketing_goods_tpl.xlsx'
      alink.download = ''
      alink.click()
    },

    // 导入预处理
    beforeExcelUpload(file) {
      if (this.beforeUploadExcel(file, this, 5)) {
        this.loading = true
        return true
      } else {
        return false
      }
    },

    //  导入
    handleExcelSuccess(res, file) {
      this.loading = false
      this.$refs.upload.clearFiles()
      if (res.code === 0) {
        this.$alert(
          '文件已上传，我们将为你导入文件的数据，具体结果请查看列表。',
          '提示',
          {
            confirmButtonText: '确定',
            center: true,
            type: 'success',
            callback: action => {
              this.resolve && this.resolve()
              this.hide()
            }
          }
        )
      } else {
        this.$message.error(res.msg)
      }
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-upload-excel {
  padding-bottom: 20px;
}
.upload-container {
  ::v-deep .el-upload {
    width: 100%;
    margin-top: 20px;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
</style>
